<template>
    <div class="app-container">
      <div class="mapDiv" v-loading="loading">
        <dailySurvey
          :allGeomList="allGeomList"
          :allGeomListCar="allGeomListCar"
          :trajectoryLine="trajectoryLine"
          :typeLayer="typeLayer"
          :clearFeature="clearFeature"
          :clearFeatureCar="clearFeatureCar"
        />
        <div class="divdata">
          <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
            <el-form-item label="日期" prop="category">
              <el-date-picker
                v-model="queryParams.nowTime"
                type="datetime"
                placeholder="请选择调日期"
                size="default"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
                @change="change"
              />
            </el-form-item>
            <el-form-item label="调查员" prop="category">
              <el-input v-model="queryParams.investigate" placeholder="请选择人员" :suffix-icon="MoreFilled" readonly
                @click="handleAddGrounp" clearable />
              <!-- <el-button type="primary" @click="handleAddGrounp">选择调查员</el-button> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <!-- <el-button type="primary" @click="resetQuery">导出</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <!-- 数据图层显示 -->
        <div class="dataLayer">
            <el-tree :data="dataLayer" show-checkbox node-key="id" :default-checked-keys="[1]" @check-change="handleNodeClick" />
        </div>
      </div>
      <el-dialog :title="typeTitle" v-model="openLeader" width="900px" append-to-body>
        <p></p>
        <el-form ref="selectRef" :model="queryParamsLeader">
          <el-row style="margin: 20px 0;">
            <el-col :span="20">
              <el-form-item label="调查员姓名" prop="personName" label-width="100px">
                <el-input v-model="queryParamsLeader.personName" placeholder="请输入调查员姓名" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="handleQuery1" style="float: right;">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table ref="selectMunchRef" :data="leaderList" stripe @selection-change="handleSelectionChange" :row-key="typeTitle.value == '选择司机'?'xvmId':'xpimId'">
          <el-table-column label="单选" width="55px">
            <template #default="scope">
              <el-radio :label="scope.row.xpimId" v-model="selectRadio"
                @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="序号" align="center" width="55">
            <template #default="scope">
              <span>{{ (queryParamsLeader.page - 1) * queryParamsLeader.rows + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名字" align="center" prop="personName" />
          <el-table-column label="电话" align="center" prop="tel" />
          <el-table-column label="单位" align="center" prop="unit" />
        </el-table>
        <pagination v-show="total1 > 0" :total="total1" v-model:page="queryParamsLeader.page"
          v-model:limit="queryParamsLeader.rows" @pagination="getAllPersonne" />
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="querySelect">确
              定</el-button>
            <el-button @click="openLeader = false">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
</template>

<script setup name="dailySurvey">
import dailySurvey from '@/map/fieldWork/dailySurvey/indexMap.vue'
import { getAllPersonnelPosition, getLeaderPosition, getActionTracks } from '@/api/fieldWork/dailySurvey.js'
import { getAllList, saveData, getDetail, updateData, getCreateInfo, del, getAllListPerson, getListPerson, getListDriver } from "@/api/fieldWork/surveyManage.js"
import { getDict } from "@/api/system/dict";
import { MoreFilled } from '@element-plus/icons-vue'
import useEventStore from "@/store/modules/event";
import { ref } from 'vue';
const currentEvent = computed(() => useEventStore().currentEvent);
const { proxy } = getCurrentInstance();
const data = reactive({
    dataLayer: [
        {id: '1', label: '现场采集人员信息'},
        {id: '2', label: '车辆信息'},
    ],
    queryParams: {
      nowTime: '',
      investigate: '',
      userId: ''
    },
    queryParamsLeader: {
      page: 1,
      rows: 10,
      personName: undefined,
    },
    form: {
    },
})
let {dataLayer,queryParams,queryParamsLeader,form} = toRefs(data);
const investigateList = ref([{id: '1',name: '测试1'}])
const loading = ref(false);
const loading2 = ref(false);
const allDataList = ref([])
const allDataList2 = ref([])
const typeLayer = ref('')
const typeTitle = ref('')
const total1 = ref(0);
const clearFeature = ref(false)
const clearFeatureCar = ref(false)
const handleNodeClick = (val,flag,zflag) => {
  debugger
  clearFeature.value = false
  clearFeatureCar.value = false
  let type = val.id
  typeLayer.value = ''
  if(flag) {
    if(type == '1') {
      getAllDataList();
    }else{
      getAllDataListCar()
    }
  }else{
    if(type == '1') {
      typeLayer.value = '采集人员'
      clearFeature.value = true
    }else{
      typeLayer.value = '车辆'
      clearFeatureCar.value = true
    }
  }
}
function change() {
  typeLayer.value = ''
  clearFeature.value = false
  if(queryParams.value.nowTime == null || queryParams.value.nowTime == ''){
    typeLayer.value = '轨迹'
    clearFeature.value = true
  }
}
function handleAddGrounp() {
  typeTitle.value = '选择调查员'
  getAllList1();
}
const allGeomListCar = ref([])
function getAllDataListCar() {
  typeLayer.value = '车辆'
  getLeaderPosition({xsemId: currentEvent.value.id }).then(response => {
    allGeomListCar.value = response.data;
    // loading.value = false;
    console.log("获取全部任务信息");
    console.log(allGeomListCar.value);
  });
}
const leaderList = ref([])
const openLeader = ref(false)
const selectionData = ref({});
const selectRadio = ref('');
function getAllList1() {
  getAllListPerson({ ...queryParamsLeader.value, xsemId: currentEvent.value.id }).then(res => {
    leaderList.value = res.data.rows ? res.data.rows : [];
    total1.value = res.data.total;
    openLeader.value = true;
    proxy.resetForm("selectRef");
    selectRadio.value = '';
    // forbidden.value = false;
    selectionData.value = {};
  })
}
function querySelect() {
    clearFeature.value = false
    typeLayer.value = ''
    queryParams.value.investigate = selectionData.value.personName;
    // queryParams.value.userId = selectionData.value.xpimId;
    queryParams.value.userId = selectionData.value.uuid;
    if(JSON.stringify(selectionData.value) == '{}') {
      typeLayer.value = '轨迹'
      clearFeature.value = true
    }
  openLeader.value = false;
}
function handleSelectionChange(selection) {
    selectionData.value = selection;
}
const forbidden = ref(false)
function getCurrentRow(row) {
  if (!forbidden.value) {
    forbidden.value = true
  }
  if (selectRadio.value) {
    if (selectRadio.value == row.xpimId) {
      selectRadio.value = ''
      forbidden.value = false
      setTimeout(() => {
        forbidden.value = true
      }, 0)
      selectionData.value = {};// 取消勾选就把回传数据清除
      return
    } else {
      forbidden.value = false
      setTimeout(() => {
        forbidden.value = true
      }, 0)
    }
  } else {
    forbidden.value = false
    setTimeout(() => {
      forbidden.value = true
    }, 0)
  }
  selectRadio.value = row.xpimId;
  selectionData.value = row;
}
const trajectoryLine = ref([])
function handleQuery() {
  if(queryParams.value.nowTime == null || queryParams.value.nowTime == '' || queryParams.value.investigate == undefined || queryParams.value.investigate == '') {
    proxy.$modal.msgSuccess("日期或者调查员不能为空");
  }else{
    typeLayer.value = '轨迹'
    getActionTracks({nowTime: queryParams.value.nowTime,xsemId: currentEvent.value.id,userId: queryParams.value.userId}).then(res => {
      if(res.data.length == 0) {
        proxy.$modal.msgSuccess("未查询到数据");
      }else{
        trajectoryLine.value = res.data
      }
    })
  }
}
/** 搜索按钮操作 */
function handleQuery1() {
  queryParamsLeader.value.page = 1;
  getAllList1();
}
const allGeomList = ref([])
/** 获取所有现场采集人员的位置 */
function getAllDataList() {
  if (currentEvent.value) {
    loading.value = true;
    typeLayer.value = '采集人员'
    getAllPersonnelPosition({xsemId: currentEvent.value.id }).then(response => {
      allGeomList.value = response.data;
      loading.value = false;
      console.log("获取全部任务信息");
      console.log(allGeomList.value);
    });
  }else {
    allGeomList.value = [];
  }
}
// watch(() => queryParams.value.nowTime, val => {
//   if(val == ''){
//     console.log("移除轨迹线");
//     typeLayer.value = '轨迹'
//     clearFeature.value = true
//   }
// },{ deep: true, immediate: true });
// watch(() => queryParams.valuen.investigate, val => {
//   if(val == ''){
//     console.log("移除轨迹线");
//     typeLayer.value = '轨迹'
//     clearFeature.value = true
//   }
// },{ deep: true, immediate: true });
onMounted(() => {
  setTimeout(()=>{
    getAllDataList()
  },500)
})

</script>
<style scoped lang="scss">
  .mapDiv {
    position:absolute;top:0px;left:0px;width:100%;height:100%;
  }
  .divdata {
    position: absolute;
    top: 1px;
  }
  .dataLayer {
    text-align: center;
    // width: 320px;
    position: absolute;
    top: 32px;
    // background: #001b43;
    background-color:rgba(228, 232, 237, 0.6)!important;
    .el-tree {
      margin-top: 10px;
      background: none;
      color:#000;
    }
  }
</style>